<template>
	<view class="job-detail">
		<!-- 头部 -->
		<view class="header">
			<view class="title">
				<text class="name">{{ job.position.name }}</text>
				<text class="salary">{{ job.salary }}</text>
			</view>
			<view class="require">
				<view class="experience">
					<text class="yzb yzb-gongzuobao top-icon"></text>
					<text>{{ job.experience }}</text>
				</view>
				<view class="education">
					<text class="yzb yzb-xueli top-icon"></text>
					<text>{{ job.education }}</text>
				</view>
			</view>
		</view>
		<!-- 岗位详情 -->
		<view class="detail">
			<view class="duty">
				<view class="title" style="margin-top: 0;"># 岗位职责</view>
				<view class="content">
					<textarea :value="job.duty" auto-height disabled="true" :maxlength="-1"></textarea>
				</view>
			</view>
			<view class="require">
				<view class="title"># 岗位要求</view>
				<view class="content">
					<textarea :value="job.require" auto-height disabled="true" :maxlength="-1"></textarea>
				</view>
			</view>
		</view>
		<!-- 公司信息 -->
		<view class="company">
			<!-- 这里 -->
			<view class="company-info" @click="toPageCompanyInfo(job.company.id)">
				<view class="wrap">
					<view class="logo"><image class="image" :src="job.company.logo" mode="aspectFill"></image></view>
					<view class="info">
						<view class="name">{{ job.company.name }}</view>
						<!-- TODO 这里也得改成动态的 -->
						<view style="color: #606266">互联网技术 · {{ job.company.scale }}</view>
					</view>
				</view>
				<text class="yzb yzb-next icon-next"></text>
			</view>
			<view class="company-location">
				<map
					:latitude="latitude"
					:longitude="longitude"
					:markers="covers"
					style="width: 100%; height: 200px"
				></map>
			</view>
		</view>
		<view class="action" v-if="userInfo.role === 'student'">
			<!-- <view class="collection">
				<text class="yzb label-icon yzb-ziyuan141"></text>
				<text>收藏</text>
			</view> -->
			<view class="send collection" @click="handleDelivery">
				<text class="yzb label-icon yzb-mianshiyaoqing"></text>
				<text>{{ status ? '已投递' : '投递' }}</text>
			</view>
			<view class="inquiry" @click="toPage">立即沟通</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { getDeliveryStatus, deliveryResume } from '@/apis/delivery/index.js';
import { getJobInfoDetail } from '@/apis/job/index.js';
const QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
import socketManager from '@/utils/websocket.js';

export default {
	data() {
		return {
			latitude: null, // 纬度
			longitude: null, // 经度
			qqmapsdk: null,
			covers: [], // 标记点
			status: false, // 投递状态
			friendId: '', // 招聘者ID
			job: {} // 岗位详细
		};
	},
	computed: {
		...mapState(['userInfo'])
	},
	onLoad(option) {
		this.friendId = option.friendId;
		this.initData(option.id);

		this.qqmapsdk = new QQMapWX({
			key: 'H2RBZ-76OWD-BUO4P-PDBMT-TXUTS-PABLR'
		});

		// 监听用户选择的简历
		uni.$on('select:resume', value => {
			if (!value) return;

			const { userInfo, friendId, job } = this;
			const formData = {
				userId: userInfo.id,
				friendId: friendId,
				jobId: job.id,
				jobName: job.position.name,
				resumeId: value,
				nickName: userInfo.nickname
			};

			deliveryResume(formData).then(res => {
				if (res.code === 200) {
					// 通知投递简历
					const socket = socketManager.getSocket();
					const userId = this.userInfo.id;
					socket.emit('delivery', { userId, friendId: this.friendId, info: res.data });
					
					this.status = true;
					uni.showToast({ icon: 'none', title: '投递成功' });
				}
			});
		});
	},
	onUnload() {
		// 移除监听事件
		uni.$off('select:resume');
	},
	methods: {
		async initData(id) {
			const res = await getJobInfoDetail(id);
			const status = await getDeliveryStatus(id);
			this.status = status.data;
			this.job = res.data;

			// 获取经纬度
			this.qqmapsdk.geocoder({
				address: res.data.company.address,
				success: res => {
					this.latitude = res.result.location.lat;
					this.longitude = res.result.location.lng;
					this.covers.push({
						id: 1,
						width: 30,
						height: 30,
						latitude: this.latitude,
						longitude: this.longitude
					});
				},
				fail: err => {
					console.log(err);
				}
			});
		},
		toPageCompanyInfo(id) {
			uni.navigateTo({ url: '/pages/company/index?id=' + id });
		},
		// 投递简历
		async handleDelivery() {
			if (this.status) return false;
			uni.navigateTo({ url: '/pages/student/resume?showIcon=' + 0 });
		},
		toPage() {
			const socket = socketManager.getSocket();
			const userId = this.userInfo.id;

			if (userId === this.friendId) {
				uni.showToast({ icon: 'none', title: '不能和自己聊天' });
				return false;
			}

			// 添加好友
			socket.emit('addFriend', { userId, friendId: this.friendId });
			this.$store.commit('SET_ACTIVE_ROOM', this.friendId)
			uni.navigateTo({
				url: `/pages/chat/chat`
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
</style>

<style lang="scss" scoped>
.job-detail {
	position: relative;
	padding: 0 30rpx;
	padding-bottom: 135rpx;
	.header {
		width: 100%;
		height: 150rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.name {
				font-size: 40rpx;
				font-weight: bold;
			}
			.salary {
				font-size: 32rpx;
				font-weight: bold;
				color: $main-color;
			}
		}
		.require {
			display: flex;
			align-items: center;
			view {
				margin-right: 20rpx;
				.yzb {
					font-size: 32rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
	.detail {
		.title {
			margin: 10rpx 0;
			font-size: 32rpx;
			color: $main-color;
		}
		textarea {
			width: 100%;
			font-size: 16px;
			line-height: 26px;
			color: #606266;
		}
	}
	.company {
		margin-top: 30rpx;
		border-top: 1rpx solid #e4e7ed;
		.company-info {
			height: 160rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.wrap {
				display: flex;
				align-items: center;
				.image {
					width: 100rpx;
					height: 100rpx;
					margin-right: 30rpx;
				}
				.name {
					margin-bottom: 10rpx;
					font-size: 36rpx;
				}
			}
			.icon-next {
				font-size: 44rpx;
			}
		}
		.company-location {
			margin-bottom: 30rpx;
		}
	}
	.action {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 130rpx;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		box-shadow: 0 -16rpx 20rpx -10rpx rgba(0, 0, 0, 0.1);
		view {
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 10rpx;
			text-align: center;
			display: inline-block;
		}
		.collection {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;
			font-size: 32rpx;
			background-color: #f4f4f4;
			.label-icon {
				font-size: 40rpx;
				margin-right: 10rpx;
			}
		}
		.inquiry {
			flex: 2;
			font-size: 36rpx;
			color: #fff;
			background-color: $main-color;
		}
	}
}
</style>
